<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="common/head::head"></th:block>
    <style>

        .layui-container {
            width: 80% !important;
        }

        .div-certificate {
            display: none;
        }

        .certText {
            padding: 10px;
        }
    </style>
</head>

<body>
<div class="layui-row">
    <button id="addCertificate" class="layui-btn layui-btn-sm">导入证书</button>
    <button id="refresh" class="layui-btn layui-btn-sm">刷新表格</button>
</div>
<table class="layui-table" id="tab_certificate" lay-filter="tab_certificate" style="margin: 0;"></table>

<div class="layui-container div-certificate" id="div-certificate">
    <form action="" class="layui-form" id="form_certificate" style="margin-top: 20px">
        <div class="layui-form-item">

            <label class="layui-form-label">证书id</label>
            <div class="layui-input-block">
                <input type="text" id="id" name="id" placeholder="创建后不能修改" class="layui-input" required
                       lay-verify="required">
                <input type="hidden" name="type">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证书名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" placeholder="请填写证书名称" class="layui-input" required
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证书路径</label>
            <div class="layui-input-block">
                <select name="path" id="path" required
                        lay-verify="required">
                    <option value="">请选择证书存放的路径</option>

                    <option th:each="item : ${certificate}" th:id="'path_'+${item}" th:value="${item}"
                            th:text="${item}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证书文件包</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="selectZip">
                    <i class="layui-icon">&#xe67c;</i>选择ZIP文件
                </button>
                <div class="layui-form-mid layui-word-aux"></div>
                <div class="layui-form-mid layui-word-aux" id="zipResult"></div>
            </div>
            <div class="layui-form-mid layui-word-aux">证书文件包里必须有(pem、crt、cer) .key文件</div>

        </div>
        <input type="hidden" lay-submit lay-filter="submitCert" id="cert_submit">
    </form>
</div>

<div id="cert_template" hidden>

</div>
</body>
<script type="text/html" id="bar_cert">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="update">编辑</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="export">导出</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="templte">模板</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
</script>

<script type="text/html" id="tem_cert">
    <div class="certText">
        <table>
            {{# layui.each(d, function(index, item){ }}
            <tr>
                <td>{{ item.name }}</td>
                <td style="padding-left: 10px;">{{ item.value }}</td>
            </tr>
            {{# }); }}
        </table>
    </div>
</script>

<script type="text/javascript">
    var laytpl;
    var col = [
        {field: 'id', title: 'id', width: '10%', sort: true},
        {field: 'name', title: '名称', sort: true},
        {field: 'domain', title: '域名', sort: true},
        {
            field: 'effectiveTime',
            title: '生效时间',
            width: '14%',
            sort: true,
            templet: function (d) {
                return formateTime(d.effectiveTime);
            }
        },
        {
            field: 'expirationTime',
            title: '到期时间',
            width: '14%',
            sort: true,
            templet: function (d) {
                return formateTime(d.expirationTime);
            }
        },
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar_cert', fixed: 'right'}
    ];

    function loadSuccess() {
        tableRender({
            id: 'tab_certificate',
            elem: '#tab_certificate',
            url: './getCertList',
            cols: [col]
        });

        var uploadConfig, hashSelectConfig, updateFormData;
        layui.use(['laytpl'], function () {
            laytpl = layui.laytpl;
            uploadRender({
                elem: '#selectZip',
                url: './saveCertificate',
                multiple: false,
                exts: 'zip',
                acceptMime: '.zip',
                field: 'file',
                data: {
                    data: function () {
                        return JSON.stringify(updateFormData);
                    }
                },
                auto: false,
                choose: function (obj) {
                    hashSelectConfig = true;
                    obj.preview(function (index, file, result) {
                        $("#zipResult").html("已选择:" + file.name);
                    });
                },
                done: function (res) {
                    layer.msg(res.msg);
                    if (200 === res.code) {
                        layer.closeAll('page');
                        // 刷新项目列表
                        table.reload('tab_certificate', {});
                    }
                }
            }, function (data) {
                uploadConfig = data;
            });


            // 表格工具条事件
            table.on('tool(tab_certificate)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                if ('update' === event) {
                    // 修改
                    updateCert(data);
                } else if ('delete' === event) {
                    // 删除
                    deleteCert(data);
                } else if ('export' === event) {
                    window.open(appendNodeId("./export?id=" + data.id));
                } else if ('templte' === event) {
                    openTemplate(data);
                }
            });


            // 新增证书
            $('#addCertificate').on('click', function () {
                // 重置表单
                document.getElementById('form_certificate').reset();
                $('#form_certificate [name="id"]').attr('readonly', false).removeClass('layui-disabled');
                $('#form_certificate [name="path"]').attr('disabled', false);
                $("input[name='type']").val("add");
                $("#zipResult").html("");
                form.render('select');
                layerOpen({
                    type: 1,
                    title: '新增证书',
                    content: $('#div-certificate'),
                    area: ['60%', '80%'],
                    btnAlign: 'c',
                    btn: ['提交'],
                    yes: function (index, layero) {
                        $('#cert_submit').click();
                    }
                });
            });

            // 新增证书
            $('#refresh').on('click', function () {
                table.reload('tab_certificate');
            });

            form.on('submit(submitCert)', function (data) {
                updateFormData = data.field;
                if (data.field.type == "edit" && !hashSelectConfig) {
                    loadingAjax({
                        url: './saveCertificate',
                        data: {
                            data: JSON.stringify(updateFormData)
                        },
                        success: function (data) {
                            layer.msg(data.msg);
                            if (200 == data.code) {
                                layer.closeAll('page');
                                // 刷新表
                                table.reload('tab_certificate');
                            }
                        }
                    });
                } else {
                    if (!hashSelectConfig) {
                        layer.msg("请选择证书包");
                        return false;
                    }
                    uploadConfig.upload();
                }

                return false;
            });
        });
    }

    // 修改证书
    function updateCert(data) {
        document.getElementById('form_certificate').reset();
        $('#form_certificate [name="id"]').attr('readonly', true).addClass('layui-disabled');
        $('#form_certificate [name="path"]').attr('disabled', 'disabled');
        for (var key in data) {
            if ("whitePath" === key) {
                document.getElementById('path_' + data[key]).setAttribute('selected', true);
            } else if ("cert" === key) {
                $("#zipResult").html(data[key]);
            } else {
                $('#form_certificate [name="' + key + '"]').val(data[key]);
            }
        }
        $("input[name='type']").val("edit");
        form.render('select');
        // 弹出
        layerOpen({
            type: 1,
            title: '编辑',
            content: $('#div-certificate'),
            area: ['60%', '80%'],
            btnAlign: 'c',
            btn: ['提交'],
            yes: function (index, layero) {
                $('#cert_submit').click();
            }
        });
    }

    // 删除证书
    function deleteCert(data) {
        layer.confirm('确定删除证书 ' + data.id + '？', {
            title: '系统提示'
        }, function (index) {
            layer.close(index);
            loadingAjax({
                url: './delete',
                data: {id: data.id},
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 == data.code) {
                        // 刷新项目列表
                        table.reload('tab_certificate', {});
                    }
                }
            });
        });
    }

    //打开模板
    function openTemplate(data) {
        var param = [{
            name: "ssl",
            value: "on;"
        }, {
            name: "listen",
            value: "443 ssl;"
        }, {
            name: "server_name",
            value: data.domain + ";"
        }, {
            name: "ssl_certificate",
            value: data.cert + ";"
        }, {
            name: "ssl_certificate_key",
            value: data.key + ";"
        }, {
            name: "ssl_session_cache",
            value: "shared:SSL:1m;"
        }, {
            name: "ssl_session_timeout",
            value: "5m;"
        }, {
            name: "ssl_ciphers",
            value: "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;"
        }, {
            name: "ssl_protocols",
            value: "TLSv1 TLSv1.1 TLSv1.2;"
        }, {
            name: "ssl_prefer_server_ciphers",
            value: "on;"
        }];

        var page = tem_cert.innerHTML;
        var view = document.getElementById('cert_template');

        laytpl(page).render(param, function (html) {
            view.innerHTML = html;
        });
        layerOpen({
            type: 1,
            title: '模板',
            content: $('#cert_template'),
            area: ['40%', '40%'],
            // btnAlign: 'c',
            // btn: ['提交'],
            yes: function (index, layero) {
            }
        });
    }
</script>

</html>
